<template>
    <ul>
        <li v-for="item in listArr" :key='item.id' @click='detail(item.id)'>
            <img v-lazy="item.list_pic_url">
            <p>{{item.name}}</p>
            <p>{{item.retail_price | Rmb}}</p>
        </li>
    </ul>
</template>

<script>
export default {
    name:'GoodsList',
    props:['listArr'],
    methods:{
        // 跳转详情页携带参数
        detail(id){
            this.$router.push({path:"/detail",query:{id:id}})
        }
    }
}
</script>

<style scope lang='less'>
ul{
    display: flex;
    justify-content: space-between;
    justify-items: center;
    flex-wrap: wrap;
    li{
        width: 49%;
        font-size: 16px;
        text-align: center;
        img{
            width: 100%;
        }
        p{
            margin: 10px 0;
        }
        p:last-child{
            color: rgb(134, 94, 18);
        }
    }
}
</style>